<template>
  <common-list-group>
    <common-tree
      slot="group"
      :isRequest="isRequest"
      :treeData="deptSelect"
      :treeProp="treeProp"
      :searchPlaceholder="'查询组织'"
      is-slot
      @handleNodeClick="handleNodeClick"
    >
      <div
        style="width: 100%"
        slot-scope="{ scope }"
        :class="{ 'e-t-content': !scope.data.freeze }"
      >
        <common-carousel-text
          :content="scope.node.label"
          :index="scope.node.id"
          :font-size="14"
        >
        </common-carousel-text>
      </div>
    </common-tree>

    <!-- 头部搜素start -->
    <common-search  slot="search"  @search="handleQuery" @reset="resetQuery">
      <el-form
        @submit.native.prevent
        :model="query"
        ref="queryForm"
        v-show="showSearch"
        :inline="true"
        label-width="60px"
      >
        <el-form-item label="用户名">
          <common-input v-model="query.userName" clearable @enter="handleQuery" />
        </el-form-item>

        <el-form-item label="姓名">
          <common-input v-model="query.nickName" clearable @enter="handleQuery" />
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="query.status" placeholder="" clearable>
            <el-option label="全部" :value="null"></el-option>
            <el-option label="正常" value="0"></el-option>
            <el-option label="冻结" value="1"></el-option>
            <el-option label="锁定" value="2"></el-option>
            <el-option label="注销" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </common-search>

    <!-- 头部搜素end -->
    <common-table
      slot="content"
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <!--<el-table-column type="selection" width="55" align="left" />-->

      <el-table-column label="用户名" align="left" prop="userName">
      </el-table-column>

      <el-table-column label="姓名" align="left" prop="nickName">
      </el-table-column>

      <el-table-column label="手机号" align="left" prop="phonenumber">
      </el-table-column>

      <!-- <el-table-column label="所属组织" align="left" prop="phonenumber">
        <template slot-scope="{row}">{{ row.phonenumber }}</template>
      </el-table-column> -->

      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="{ row }">
          <el-tag type="success" v-if="row.status == 0">正常</el-tag>
          <el-tag type="danger" v-else-if="row.status == 1">冻结</el-tag>
          <el-tag type="danger" v-else-if="row.status == 2">锁定</el-tag>
          <el-tag type="danger" v-else>注销</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="left"
        prop="createTime"
        width="160px"
      ></el-table-column>

      <el-table-column label="操作" align="left" width="90px">
        <template slot-scope="{ row }">
          <el-button type="text" @click="edit(row.userId, row.userName)"
            >新增</el-button
          >
          <el-button type="text" @click="listFun(row.userId)">编辑</el-button>
        </template>
      </el-table-column>
    </common-table>

    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageNum"
      :limit.sync="query.pageSize"
      @pagination="getList"
    />

    <!-- 列表 end -->
    <editDialog ref="editDialog" @refresh="getList" />
    <editListDialog ref="editListDialog" />
  </common-list-group>
</template>

<script>
import { dept_select, user_list } from "@/api/management/usercenter/user.js";
import editDialog from "./components/fromDialog";
import editListDialog from "./components/fromEditDialog";
import { decode } from "@/utils/aesUtils";
import Utils from "@/utils";
import BaseList from "@/mixins/BaseList";

export default {
  mixins: [BaseList],
  components: { editDialog, editListDialog },
  props: {},
  data() {
    return {
      filterMenu: "", //菜单筛选
      deptSelect: [], // 菜单树
      isRequest: false,
      treeProp: {
        // 树参数
        children: "children",
        label: "label",
      },
      showSearch: true, // 查询部分显示
      total: 1, // 总条数
      loading: false, // table 加载中
      list: [], // 数据列
      selectionIds: "", // 列表选中数据id
      single: true, // 非单个禁用
      multiple: true, // 非多个禁用
      query: {
        pageNum: 1,
        pageSize: 10,
        status: null,
      }, // 查询条件
    };
  },
  watch: {
    filterMenu(val) {
      this.$refs.deptSelect.filter(val);
    },
  },
  computed: {},
  methods: {
    handleNodeClick(data) {
      /* console.log(JSON.stringify(data));
      console.log(data.label); */
      if (!!data.data.freeze) {
        this.query.deptId = data.data.id;
        this.getList();
      }
    },
    /**
     * 过滤
     */
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //组织下拉选择
    getDeptSelect() {
      dept_select({})
        .then((res) => {
          if (res && res.code === 200) {
            this.deptSelect = res.data;
          } else {
            this.deptSelect = [];
          }
        })
    },
    /**
     * 选择
     */
    handleSelectionChange(selection) {
      this.selectionIds = selection.map((item) => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /**
     * 查询
     */
    handleQuery() {
      this.query.pageNum = 1;
      this.getList();
    },
    /**
     * 重置查询
     */
    resetQuery() {
      this.query = this.$options.data().query;
      // this.getList()
    },
    /**
     * 获取列表
     */
    getList() {
      this.loading = true;
      this.isRequest = true;
      user_list({ ...this.query })
        .then((res) => {
          if (res && res.code === 200) {
            this.list = res.rows.reduce((r, c) => {
              r.push({
                ...c,
                phonenumber: c.phonenumber
                  ? Utils.phoneEncryption(decode(c.phonenumber))
                  : "",
              });
              return r;
            }, []);
            this.total = res.total;
          } else {
            this.list = [];
            this.total = 0;
            this.handleListTips(res);
          }
        })
        .finally(() => {
          this.loading = false;
          this.isRequest = false;
        });
    },
    /**
     * 添加/编辑
     */
    edit(userId, userCode) {
      this.$refs.editDialog.add(userId, userCode);
    },
    /**
     * 根据用户id查询列表
     */
    listFun(userId) {
      this.$refs.editListDialog.show(userId);
    },
  },
  created() {
    this.getDeptSelect();
    this.getList();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.list-box {
  clear: both;
  height: auto;
  overflow: hidden;

  .left {
    height: calc(100vh - 124px);
    margin-right: 20px;
    float: left;
    width: 240px;

    .tree {
      height: calc(100% - 56px);

      .el-dropdown-link {
        display: inline-block;
        width: 100%;
      }

      ::v-deep {
        .el-dropdown {
          width: 100% !important;
        }
      }
    }
  }

  .right {
    float: right;
    width: calc(100% - 260px);
  }
}

.tree-data-wrap {
  margin-top: 8px;
  max-height: calc(100% - 40px);
  overflow-y: scroll;
}
</style>
